<template>
  <div class="container">
    <!-- 头部栏，因为后面可能不需要复用，所以不选择封装 -->
    <div class="search">
      <div class="news">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="searchipt" @click="$router.push('/search')">
        <span class="iconfont iconsearch"></span>
        <i>搜索新闻</i>
      </div>
      <div class="home" @click="$router.push('/personal')">
        <span class="iconfont iconwode"></span>
      </div>
    </div>
    <van-tabs v-model="active" sticky>
      <van-tab v-for="(value,index) in categorylist" :title="value.name" :key="index">
        <van-list
          @load="onLoad"
          :immediate-check="false"
          v-model="value.loading"
          :finished="value.finished"
          finished-text="不要拉拉扯扯了，我也是有底线的人啊"
        >
          <div v-for="(value,index) in value.list" :key="index">
            <!-- 放一张图片的封装组件 -->
            <postItem4
              v-if="value.type==1 && value.cover.length>0 &&value.cover.length<3"
              :data="value"
            ></postItem4>
            <!-- 放三张图片的封装组件 -->
            <postItem5 v-if="value.type==1&&value.cover.length>=3" :data="value"></postItem5>
            <!-- 放一个视频的封装组件 -->
            <postItem6 v-if="value.type==2" :data="value"></postItem6>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// 文章的首页中需要引进文章的模块
import postItem4 from "../components/postitem4";
import postItem5 from "../components/postItem5";
import postItem6 from "../components/postItem6";
export default {
  data() {
    return {
      active: 0,
      categorylist: [], //栏目列表
    };
  },
  components: {
    postItem4,
    postItem5,
    postItem6,
  },
  watch: {
    active() {
      this.getpost();
      if (this.active == this.categorylist.length - 1) {
        this.$router.push("/manage");
      }
    },
  },
  mounted() {
    // 一进入页面就开始数据的加载
    // 在这里用请求头是为了可以拿到含有关注的列表
    this.$axios({
      url: "/category",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    }).then((res) => {
      console.log(res);
      const newCate = res.data.data.map((item) => {
        return {
          ...item,
          list: [],
          pageIndex: 1,
          pageSize: 6,
          loading: false,
          finished: false,
        };
      });
      newCate.push({
        name: "V",
      });
      this.categorylist = newCate;
      this.getpost();
    });
  },
  methods: {
    onLoad() {
      this.categorylist[this.active].pageIndex += 1;
      this.getpost();
    },
    getpost() {
      this.$axios({
        url: "/post",
        params: {
          category: this.categorylist[this.active].id,
          pageIndex: this.categorylist[this.active].pageIndex,
          pageSize: this.categorylist[this.active].pageSize,
        },
      }).then((res) => {
        // console.log(2323,res);
        const { data } = res.data;
        console.log(data);
        this.categorylist[this.active].list = [
          ...this.categorylist[this.active].list,
          ...data,
        ];
        this.categorylist[this.active].loading = false;
        if (data.length < this.categorylist[this.active].pageSize) {
          this.categorylist[this.active].finished = true;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
.container {
  // padding: 15/360*100vw;
  .search {
    display: flex;
    width: 360/360 * 100vw;
    height: 49/360 * 100vw;
    background-color: #ff0000;
    justify-content: space-between;
    align-items: center;
    padding: 15/360 * 100vw;
    box-sizing: border-box;
    .news {
      width: 52/360 * 100vw;
      height: 54/360 * 100vw;
      .iconnew {
        font-size: 54/360 * 100vw;
        color: #ffffff;
      }
    }
    .searchipt {
      width: 210/360 * 100vw;
      height: 34/360 * 100vw;
      background-color: rgba(225, 225, 225, 0.4);
      border-radius: 17/360 * 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .home {
      width: 32/360 * 100vw;
      height: 32/360 * 100vw;
      .iconwode {
        font-size: 32/360 * 100vw;
        color: #ffffff;
      }
    }
  }
  /deep/.van-tab:nth-last-child(2) {
    background-color: #eee;
    width: 20px !important;
    position: absolute;
    right: 0;
    top: 10px;
    border-bottom: none;
  }
  /deep/ .van-tabs__nav {
    position: static;
    background-color: #eee;
  }
  /deep/.van-tabs__line {
    display: none;
  }
  /deep/.van-tab--active {
    border-bottom: 2px solid red;
  }
  /deep/.van-tab--active:nth-last-child(2) {
    border-bottom: none;
  }
}
</style>